<template>
  <div class="app-container">
    <el-card shadow="never" class="table-container">
      <template #header>
        <el-button type="success" plain @click="openDialog()">
          <i-ep-plus />
          设置
        </el-button>
      </template>

      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="tableData"
        highlight-current-row
        row-key="id"
        :tree-props="{
          children: 'children',
          hasChildren: 'hasChildren',
        }"
        border
      >
        <el-table-column
          label="菜单"
          prop="permissionName"
          min-width="100"
          show-overflow-tooltip
        >
          <template #default="scope">
            <svg-icon :icon-class="scope.row.icon" class="mr-[3px]" />
            {{ scope.row.permissionName }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <sysfrequentmenu-edit
      :visible="addDialog.visible"
      :title="addDialog.title"
      :data="addDialog.data"
      :selectMenuList="selectMenuList"
      @reset-table="getTableData"
      :is-readonly="addDialog.readvisible"
      @change-visible="changeVisible"
    />
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import SvgIcon from "@/components/SvgIcon/index.vue";

const APPTYPE = import.meta.env.VITE_APP_TYPE;
const PARENT_MENU_ID = import.meta.env.VITE_APP_PARENT_MENU_ID;

defineOptions({
  name: "SYSTEMSYSFREQUENTMENU",
  inheritAttrs: false,
});

const tableData = ref([]);

onMounted(() => {
  getTableData();
  resolveTopMenu();
});

const loading = ref(false);

const getTableData = async () => {
  const { data } = await request({
    url: "/system/sysfrequentmenu/tree",
    method: "post",
  });
  tableData.value = data;
};

const addDialog = reactive<DialogOption>({
  visible: false,
  readvisible: false,
  title: "",
  data: {},
});

/** 打开常用菜单表表单弹窗 */
function openDialog() {
  addDialog.title = "新增常用菜单表";
  addDialog.visible = true;
  addDialog.readvisible = false;
}

function changeVisible(value: boolean) {
  addDialog.visible = value;
  if (!value) {
    addDialog.data = {};
  }
}

const selectMenuList = ref();
const resolveTopMenu = async () => {
  const { data } = await request({
    url: `/system/loginUserPower/topMenu?applicationType=${APPTYPE}&parentMenuId=${
      sessionStorage.getItem("parentMenuId") || PARENT_MENU_ID
    }`,
    method: "post",
  });
  selectMenuList.value = data;
  selectMenuList.value.forEach((item: any) => {
    getTreeChildren(item.id).then((res: any) => {
      item.children = res;
    });
  });
};

const getTreeChildren = async (parentId: string) => {
  const { data } = await request({
    url: `/system/loginUserPower/tree?applicationType=${APPTYPE}&parentMenuId=${parentId}`,
    method: "post",
  });
  return Promise.resolve(data);
};
</script>
